const path = require('path'); //引入  Node.js自带的路径管理模块
//html插件
const HtmlWebpackPlugin = require('html-webpack-plugin')
    //css插件
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const webpack = require('webpack');

//增加页面
const pages = ['index', "studentsUpdate",
    'studentsAdd', 'studentsList',
    'professionAdd', 'professionList',
    'classesAdd', 'classesList',
    'login', 'register'
];

//封装HTML页面
function htmlPlugin() {
    return pages.map(item => {
        return new HtmlWebpackPlugin({
            template: `./src/${item}.html`, //设置需要打包的html文件名
            filename: `${item}.html`, //打包后的文件名
            chunks: [item], //当前html需要引入js的文件名
        })
    })
}
//入口文件
function entryPath() {
    const entry = {};
    pages.forEach(item => {
        return entry[item] = `./src/js/${item}.js`
    })
    return entry;
}
module.exports = {
    mode: 'development', //配置代码的编译（打包）模式：开发模式：development  生产模式：production
    entry: { //用来配置每一个页面的入口 JS 文件：
        // index: './src/js/index.js', //entry属性的键,将作为打包后新生成的文件名
        ...entryPath(),

    },
    output: { // 出口文件，指的就是打包完成后的文件
        path: path.resolve(__dirname, 'dist'), // 设置打包后的代码存储路径 resolve拼接绝对绝对路径
        //__dirname绝对路径
        filename: 'js/[name].js' // 设置打包后的文件名
    },
    module: {
        rules: [
            //配置css打包规则
            {
                test: /\.css$/i, //匹配需要打包的文件名
                use: [MiniCssExtractPlugin.loader, 'css-loader'],
                // exclude: /node_modules/, //排除文件
            },
            //配置scss的打包规则
            {
                test: /\.scss$/i, //匹配需要打包的文件名
                use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader'],
                exclude: /node_modules/, //排除文件
            },
            //css中的图片打包规则
            {
                test: /\.(png|jpg|jpeg|gif|webp|svg)$/i,
                use: [{
                    loader: 'url-loader',
                    options: {
                        limit: 1024 * 8, // 8kb 以下的图片采用 base64 进行处理
                        outputPath: './images/', // 打包后图片的存储路径
                        esModule: false //解决插件冲突
                    }
                }],
                exclude: /node_modules/, //排除文件
            },
            // html 中的图片
            {
                test: /\.html$/i,
                use: ['html-withimg-loader']
            }
        ]
    },
    plugins: [ //配置一些其他功能的插件
        // //打包HTML
        // new HtmlWebpackPlugin({
        //     template: './src/index.html', //设置需要打包的html文件名
        //     filename: 'index.html', //打包后的文件名
        //     chunks: '[index]', //当前html需要引入js的文件名
        // }),

        ...htmlPlugin(),

        //配置打包后CSS文件名
        new MiniCssExtractPlugin({
            filename: './css/[name].css'
        }),
        //jquery全局配置
        new webpack.ProvidePlugin({
            '$': 'jquery' //$代表jquery
        })
    ],
    //别名配置
    resolve: {
        alias: {
            '@css': path.resolve(__dirname, './src/css'),
            '@js': path.resolve(__dirname, './src/js'),
            '@utils': path.resolve(__dirname, './src/utils'),
        }
    },
    devServer: {
        openPage: 'index.html', // 默认打开的页面
        port: 8888, //端口号
        open: true, // 启动服务器时自动打开页面
        // hot: true, // 热更新
        //ajax请求的服务器地址
        // proxy: {
        //     '/api': {
        //         target: 'http://localhost:3000', // 后端服务器地址
        //         pathRewrite: { "/api": "" }
        //     }
        // }
    },
}